<template>
	<view class="container">
		<view class="content">
			<view class="content-one">
				<view class="title">本云端推广佣金模式为七级代理模式</view>
				<view class="secondary-title">七级代理 每级不限量</view>
				<view class="agent-level-bg">
					<view class="agent-level-bg1"></view>
					<view class="agent-level-bg2"></view>
				</view>
				<view class="coordinates">
					<view class="coordinates-item">一级</view>
					<view class="coordinates-item">二级</view>
					<view class="coordinates-item">三级</view>
					<view class="coordinates-item">四级</view>
					<view class="coordinates-item">五级</view>
					<view class="coordinates-item">六级</view>
					<view class="coordinates-item">七级</view>
				</view>
			</view>
			
			<view class="content-two">
				<view class="explain-title">返佣说明</view>
				<view class="table-th">
					<view class="table-th-td">代理级别</view>
					<view class="table-th-td">返佣金额</view>
				</view>
				<view class="table-tr" v-for="(item, index) in rankLists">
					<view class="table-tr-td table-tr-td-1">{{item.name}}级</view>
					<view class="table-tr-td">用户交易额</view>
					<view class="table-tr-td green-F">{{item.val}}%</view>
				</view>
			</view>
		</view>
		<tabbar-diy :isIndex="3" :isInner="true"></tabbar-diy>
	</view>
</template>

<script>
	let _self;
	import tabbarDiy from '../../components/tabbar-diy.vue'
	export default {
		data() {
			return {
				isIndex: 3,
				rankLists: [
					{name: '一', val: '5.000'},
					{name: '二', val: '2.000'},
					{name: '三', val: '1.000'},
					{name: '四', val: '0.500'},
					{name: '五', val: '0.500'},
					{name: '六', val: '0.500'},
					{name: '七', val: '0.500'}
				],
			}
		},
		components:{
			tabbarDiy
		},
		onShow(){
			console.log(11)
		},
		onLoad() {
			_self = this;
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content{
		color: #FFFFFF;
		padding: 20rpx 0 120rpx;
		text-align: center;
		background-color: #202A33;
	}
	.content-one{
		width: 686rpx;
		height: 465rpx;
		margin: 0 auto;
		background-color: #111F2A;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding-top: 40rpx;
		
		.title{
			font-size: 29rpx;
		}
		.secondary-title{
			font-size: 24rpx;
			color: #7190FC;
			margin-top: 24rpx;
		}
		.agent-level-bg{
			width: 622rpx;
			height: 231rpx;
			margin: 40rpx auto 0;
			background-color: #007AFF;
			background: url('../../static/images/agent-level-bg.png') no-repeat;
			background-size: 100% 100%;
			position: relative;
			
			.agent-level-bg1{
				width: 622rpx;
				height: 114rpx;
				background: url('../../static/images/agent-level-bg1.png') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			.agent-level-bg2{
				width: 588rpx;
				height: 208rpx;
				background: url('../../static/images/agent-level-bg2.png') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 19rpx;
				left: 16rpx;
			}
		}
		.coordinates{
			width: 588rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			color: #7190FC;
			margin-top: 15rpx;
			
			.coordinates-item{
				font-size: 24rpx;
				transform: scale(0.75);
			}
		}
	}
	
	.content-two{
		width: 694rpx;
		height: 552rpx;
		box-sizing: border-box;
		padding: 30rpx 35rpx;
		margin: 18rpx auto;
		border-radius: 28rpx;
		background-color: #111F2A;
		
		.explain-title{
			font-size: 29rpx;
		}
		.explain-title::after{
			content: '';
			display: inline-block;
			width: 639rpx;
			height: 6rpx;
			background: url(../../static/images/commission-list-head.png) no-repeat;
			background-size: 100% 100%;
		}
		
		.table-th{
			height: 56rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.table-th-td{
			font-size: 25rpx;
		}
		.table-tr{
			height: 54rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.table-tr-td-1{
			color: #7190FC;
		}
		.table-tr-td{
			font-size: 24rpx;
			transform: scale(0.875);
		}
	}

</style>
